<template>
	<!-- 分类明细 -->
	<div>
		<van-nav-bar
		  :title="comdName"
		  left-text=""
		  fixed
		  left-arrow
		  @click-left="retreat"
		/>
		<div ref="wrapper" class="commodity" @scroll="scrollTop" :style="{ height: wrapperHeight + 'px' }">
			<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
			<div class="commodity-list">
				<div class="item-box" v-for="(item,i) in commodityList" :key="i">
					<div class="item-img" @click="shopLink(item)">
						<img :src="item.image_url" alt="">
					</div>
					<div class="item-text">
						<div class="item-name">
							{{item.name}}
						</div>
						<div class="item-price">
							<div>
								<span class="price1"><span>￥</span>{{item.price}}</span>
								<span class="price2">￥{{item.price*2}}</span>
							</div>
							<div class="item-count">已拼{{item.sales_volume}}</div>
						</div>
					</div>
				</div>
			</div>
			</mt-loadmore>
			<to-load v-show="allLoaded"></to-load>
		</div>
		<!-- 回到顶部 -->
		<goTop :st_bool='st_bool' @toTop='toTop' @toBottom='toBottom'></goTop>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				commodityList: [], //商品数据
				bool: false, //加载
				pageNumBottom: 1, //页码
				allLoaded: false,
				comdName:this.$route.query.name,
				wrapperHeight:0,
				st_bool:false,//是否滑动
			}
		},
		created(){
			this.seckillList();
		},
		mounted(){
			this.wrapperHeight =
			  document.documentElement.clientHeight -
			  this.$refs.wrapper.getBoundingClientRect().top;
		},
		components:{},
		methods:{
			//后退
			retreat() {
				if (window.history.length <= 1) {
					this.$router.push({path:'/'})
				} else {
					this.$router.go(-1);
				}
			},
			//跳转商品详情页
			shopLink(val) {
			  this.$router.push({
			    name: '商品详情',
			    query: {id: val.id},
				})
			},
			//商品列表
			async seckillList() {
				this.bool = true;
				let params = {
					id: this.$route.query.id,
					pageNum: this.pageNumBottom, //页码
					pageSize: 10, //每页条数
					productName: this.$route.query.name,
					type: "all",
					desc:"asc",
				};
				const res = await this.$axios.post(this.$api.commodityData, params);
				if (res.success) {
					this.commodityList = res.data.list;
					this.isHaveMore(res.data.nextPage);
					this.$refs.loadmore.onTopLoaded();
				} else {
					this.$toast(res.msg);
					this.allLoaded = true; //true是禁止上拉加载
				}
				this.bool = false;
			},
			
			//上拉刷新·
			loadTop() {
				this.loadFrist();
			},
			loadBottom() {
				this.loadMore();
			},
			// 下来刷新加载
			async loadFrist() {
				this.$store.commit('noLoadEnabled');
				this.pageNumBottom = 1;
				let params = {
					id: this.$route.query.id,
					pageNum: this.pageNumBottom, //页码
					pageSize: 10, //每页条数
					productName: this.$route.query.name,
					type: "all",
					desc:"asc",
				};
				const res = await this.$axios.post(this.$api.commodityData, params);
				if (res.success) {
					this.commodityList = res.data.list;
					this.$refs.loadmore.onTopLoaded();
					this.isHaveMore(res.data.nextPage);
				} else {
					this.$toast(res.msg);
				}
				this.$store.commit('yesLoadEnabled');
			},
			// 加载更多
			async loadMore() {
				this.$store.commit('noLoadEnabled');
				this.pageNumBottom += 1;
				let params = {
					id: this.$route.query.id,
					pageNum: this.pageNumBottom, //页码
					pageSize: 10, //每页条数
					productName: this.$route.query.name,
					type: "all",
					desc:"asc",
				};
				const res = await this.$axios.post(this.$api.commodityData, params);
				if (res.success) {
					this.commodityList = this.commodityList.concat(res.data.list);
					this.isHaveMore(res.data.nextPage);
					this.$refs.loadmore.onBottomLoaded();
				} else {
					this.$toast(res.msg);
				}
				this.$store.commit('yesLoadEnabled');
			},
			isHaveMore(isHaveMore) {
				// 是否还有下一页，如果没有就禁止上拉刷新
				this.allLoaded = true; //true是禁止上拉加载
				if (isHaveMore) {
					this.allLoaded = false;
				}
			},
			//进入详情
			//获取商品分类
			async getClassification() {
				let params = {};
				const res = await this.$axios.get(this.$api.navData, params);
				if (res.success) {
					this.navList = res.data;
				} else {
					this.$toast(res.msg);
				}
			},
			//滑动top 回到顶部，回到底部
			scrollTop(){
				if (this.$refs.wrapper.scrollTop>60) {
				  this.st_bool=true;
				}else {
				  this.st_bool=false;
				}
			},
			toTop(i){
			  //参数i表示间隔的幅度大小，以此来控制速度
			  this.$refs.wrapper.scrollTop-=i;
			  var c= 0;
			  if (this.$refs.wrapper.scrollTop>0) {
			    c=setTimeout(()=>this.toTop(i),16);
			  }else {
			    clearTimeout(c);
			  }
			},
			toBottom(i){
			  var clientHeight=this.$refs.wrapper.clientHeight;
			  var scrollHeight=this.$refs.wrapper.scrollHeight;
			  var height=scrollHeight-clientHeight; //超出窗口上界的值就是底部的scrolTop的值
			  this.$refs.wrapper.scrollTop+=i;
			  if (this.$refs.wrapper.scrollTop<height) {
			    var c=setTimeout(()=>this.toBottom(i),16);
			  }else {
			    clearTimeout(c);
			  }
			},
		}
	}
</script>
		
	
<style lang="less" scoped>
	//热卖商品
	.hos-list{
		width:100%;
		.top-img{
			width: 170px;
			margin: 10px auto;
		}
		
	}
	
	.commodity{
		margin-top: 54px;
		overflow: scroll;
		position: relative;
	}
	.commodity-list{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.item-box{
			width: 49%;
			margin-bottom: 10px;
			background: #fff;
			border-radius: 5px;
			overflow: hidden;
			.item-img{
				height: 185px;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.item-text{
				padding: 5px 6px;
				.item-name{
					height: 50px;
					text-align: left;
					color: #333333;
					font-size: 14px;
				}
				.item-price{
					display: flex;
					justify-content: space-between;
					.price1{
						color: #D30E0F;
						font-size: 16px;
						font-weight: 700;
						span{
							font-weight: 100;
							font-size: 14px;
						}
					}
					.price2{
						font-size: 12px;
						color: #ccc;
					}
					.item-count{
						color: #ccc;
					}
				}
			}
		}
	}
</style>
